<template>
  <div class="panel">
    <!-- 原始的页面布局 -->
    <div class="original-layout" v-if="windowWidth >= 768">
      <el-row>
        <el-col :span="18" class="camera-panel">
          <div class="mjpeg-player">
            <img :src="videoSrc" alt="Video Stream" style="width: 100%;" class="img" />
          </div>
        </el-col>
        <el-col :span="6" class="blockpanelcol">
          <el-row class="blockpanelrow1">
            <el-col :span="8"><DataBlock data_name="湿度" :data_value="humidity" /></el-col>
            <el-col :span="8"><DataBlock data_name="温度" :data_value="temperature" /></el-col>
            <el-col :span="8"><DataBlock data_name="水位" :data_value="waterLevel" /></el-col>
          </el-row>
          <el-row class="blockpanelrow2">
            <el-col :span="8"><DataBlock data_name="X轴加速度" :data_value="accelerationX" /></el-col>
            <el-col :span="8"><DataBlock data_name="Y轴加速度" :data_value="accelerationY" /></el-col>
            <el-col :span="8"><DataBlock data_name="Z轴加速度" :data_value="accelerationZ" /></el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row class="emptyblock">
        <el-col :span="18" class="gpsblock">
          经纬度: 31.92 N , 118.90 E
          当前位于:江苏省南京市江宁区
          <!-- 这里可以添加其他内容 -->
          
        </el-col>
         <el-col :span="6">
          <!-- 刷新按钮 -->
           <el-row >
             <el-col :span="12" class="emptyblock"> <el-button size="large" class="fanbutton" @click=OpenFan>打开风扇</el-button></el-col>
             <el-col :span="12" class="emptyblock"> <el-button size="large " class="fanbutton" @click=CloseFan>关闭风扇</el-button></el-col>
            <!-- <el-col :span="12"><el-button type="primary" @click="handleResize">刷新数据</el-button></el-col> -->
           </el-row>

        </el-col>
      </el-row>
    </div>

    <!-- 修改后的页面布局 -->
    <div class="modified-layout" v-else>
      <el-row>
        <el-col :span="24" class="camera-panel">
          <div class="mjpeg-player">
            <img :src="videoSrc" alt="Video Stream" style="width: 100%;" class="img" />
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24" class="blockpanelcol">
          <el-row class="blockpanelrow1">
            <el-col :span="8"><DataBlock data_name="湿度" :data_value="humidity" /></el-col>
            <el-col :span="8"><DataBlock data_name="温度" :data_value="temperature" /></el-col>
            <el-col :span="8"><DataBlock data_name="水位" :data_value="waterLevel" /></el-col>
          </el-row>
          <el-row class="blockpanelrow2">
            <el-col :span="8"><DataBlock data_name="X轴加速度" :data_value="accelerationX" /></el-col>
            <el-col :span="8"><DataBlock data_name="Y轴加速度" :data_value="accelerationY" /></el-col>
            <el-col :span="8"><DataBlock data_name="Z轴加速度" :data_value="accelerationZ" /></el-col>
          </el-row>
        </el-col>
      </el-row>
        <el-row class="emptyblock">
        <el-col :span="14" class="gpsblock">
          经纬度: 31.92 N , 118.90 E
          当前位于:江苏省南京市江宁区
          <!-- 这里可以添加其他内容 -->
        </el-col>
         <el-col :span="10">
           <el-row class="emptyblock2">
             <el-col :span="12" > <el-button size="large" class="fanbutton2" @click=OpenFan>打开风扇</el-button></el-col>
             <el-col :span="12" > <el-button size="large " class="fanbutton2" @click=CloseFan>关闭风扇</el-button></el-col>
            <!-- <el-col :span="12"><el-button type="primary" @click="handleResize">刷新数据</el-button></el-col> -->
           </el-row>

        </el-col>
      </el-row>
    </div>
  </div>
</template>



<!-- <template>

  <div class="panel">
    <el-row >
        <el-col :span="24" class="camera-panel">
          <div class="mjpeg-player">
            <img :src="videoSrc" alt="Video Stream" style="width: 100%;" class="img" />
          </div>
        </el-col>

    </el-row>
    <el-row>
              <el-col :span="24" class="blockpanelcol">
          <el-row class="blockpanelrow1">
            <el-col :span="8"><DataBlock data_name="湿度" :data_value="humidity" /></el-col>
            <el-col :span="8"><DataBlock data_name="温度" :data_value="temperature" /></el-col>
            <el-col :span="8"><DataBlock data_name="水位" :data_value="waterLevel" /></el-col>
          </el-row>

          <el-row class="blockpanelrow2">
            <el-col :span="8"><DataBlock data_name="X轴加速度" :data_value="accelerationX" /></el-col>
            <el-col :span="8"><DataBlock data_name="Y轴加速度" :data_value="accelerationY" /></el-col>
            <el-col :span="8"><DataBlock data_name="Z轴加速度" :data_value="accelerationZ" /></el-col>
          </el-row>
        </el-col>
    </el-row>
    
  </div>
</template> -->

<script>
import DataBlock from './DataBlock.vue';
import {getLatestHumidity,getLatestAcceleration,getLatestTemperature,getLatestWaterLevel} from '../assets/js/getLatestData'
import { onMounted } from 'vue';
import {fanClose,fanOpen } from '../assets/js/mqttControl'

var humidity = -1;
var temperature = -1;
var waterLevel = -1;
var accelerationX = -1;
var accelerationY = -1;
var accelerationZ = -1;

var host = window.location.hostname; // 获取当前主机名

function OpenFan() {
  fanOpen();
}

function CloseFan() {
  fanClose();
}

export default {
  data() {
    return {
      videoSrc: 'http://'+host+':5000/video_feed',
      humidity: -1, // 初始湿度值设置为 -1 或其他默认值,
      temperature: -1, // 初始温度值设置为 -1 或其他默认值
      waterLevel: -1, // 初始水位值设置为 -1 或其他默认值
      accelerationX: -1, // 初始X轴加速度值设置为 -1 或其他 默认值
      accelerationY: -1, // 初始Y轴加速度值设置为 -1 或其他默认值
      accelerationZ: -1, // 初始Z轴加速度值设置为 -1 或其他默认值
      intervalId: null, // 用于存储 setInterval 的返回值，以便后续清除定时器
      windowWidth: window.innerWidth,
    };
  },
  mounted() {

    window.addEventListener('resize', this.handleResize);
    // 检查浏览器是否支持MSE（Media Source Extensions）
    if (!window.MediaSource) {
      console.error('The MediaSource API is not supported.');
    }

    // 调用 getLatestHumidity 函数获取湿度值
    this.fetchAndSetHumidity();
    this.fetchAndSetTemperature();
    this.fetchAndSetWaterLevel();
    this.fetchAndSetAcceleration();

    // 设置定时器，每秒调用一次 fetchAndSetHumidity 方法
    this.intervalId = setInterval(() => {
      this.fetchAndSetHumidity();
      this.fetchAndSetTemperature();
      this.fetchAndSetWaterLevel();
      this.fetchAndSetAcceleration();
    }, 1000);
  },
  beforeUnmount() {
    // 在组件卸载前清除定时器
    if (this.intervalId) {
      clearInterval(this.intervalId);
    }
  },
  methods: {
    OpenFan() {
      fanOpen();
    },

    CloseFan() {
      fanClose();
    },

    handleResize() {
      this.windowWidth = window.innerWidth;
    },
    fetchAndSetHumidity() {
      getLatestHumidity()
        .then(value => {
          // 更新湿度值
          this.humidity = value;
        })
        .catch(error => {
          // 处理错误情况
          console.error('Error fetching humidity', error);
          this.humidity = 'Failed to fetch'; //错误 设置提示
        });
  },
    fetchAndSetTemperature() {
      getLatestTemperature()
        .then(value => {
          // 更新温度值
          this.temperature = value;
        })
        .catch(error => {
          // 处理错误情况
          console.error('Error fetching temperature', error);
          this.temperature = 'Failed to fetch'; //错误 设置提示
        });
    },
    fetchAndSetWaterLevel() {
      getLatestWaterLevel()
        .then(value => {
          // 更新水位值
          this.waterLevel = value;
        })
        .catch(error => {
          // 处理错误情况
          console.error('Error fetching water level', error);
          this.waterLevel = 'Failed to fetch'; //错误 设置提示
        });
    },
    fetchAndSetAcceleration() {
      getLatestAcceleration()
        .then(value => {
          // 更新加速度值
          this.accelerationX = value[0];
          this.accelerationY = value[1];
          this.accelerationZ = value[2];
        })
        .catch(error => {
          // 处理错误情况
          console.error('Error fetching acceleration', error);
          this.acceleration = 'Failed to fetch'; //错误 设置提示
        });
    }
  
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
  },
}

</script>

<style scoped>


.camera-panel {
  object-fit: fill;
  display: flex;
}

.blockpanelrow1 {
  flex-direction: row;
  height: auto;
  object-fit: fill;
  display: flex;
}

.blockpanelrow2 {
  flex-direction: row;
  height: auto;
  object-fit: fill;
    display: flex;
}

.blockpanelcol {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: auto;
  object-fit:fill;
}

.panel{
  align-items: flex;

}

.mjpeg-player {
  position: relative;
  width: 100%;
  object-fit: contain;


}

.img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.emptyblock {
  height: 100%;
  border: 1px solid #000000;
  background-color: #81c5df;
  object-fit: fill;
}

.emptyblock2{
  height: 100%;
  background-color: #81c5df;
  
}

.gpsblock {
  height: 100%;

  object-fit: fill;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
  margin-bottom: 30px;
}

.fanbutton {
  width: 100%;
  height: 100%;
  background-color: #81c5df;
  border: none;
  color: #000000;
  font-size: 25px;
  margin-top: 17px;
  margin-bottom: 17px;
}
.fanbutton2{
  width: 100%;
  height: 100%;
  background-color: #81c5df;
  border: 1px solid #000000;
  color: #000000;
  /* margin-top: 20px;
  margin-bottom: 20px; */
}
</style>